<script setup lang="ts">
import ArticleMenu from '@/components/article-menu.vue';
import ArticleTopBg from '@/components/article-top-bg.vue';
import { getTimelineList } from '@/api/timeline';
import { onMounted, ref } from 'vue';
import LayoutFloatingButtons from '@/components/layout-floating-buttons.vue';
import LayoutFooter from '@/components/layout-footer.vue';
import { useWebConfigStore } from '@/stores';

// 定义事件类型
type EventType = 'blog' | 'project' | 'achievement' | 'work' | 'life' | 'study';

// 定义图标映射接口
interface IconMap {
  blog: string;
  project: string;
  achievement: string;
  work: string;
  life: string;
  study: string;
  [key: string]: string; // 添加索引签名
}

const webConfigStore = useWebConfigStore();

// 获取事件图标
const getEventIcon = (type: string): string => {
  const icons: IconMap = {
    blog: 'fas fa-pen-fancy',
    project: 'fas fa-rocket',
    achievement: 'fas fa-award',
    work: 'fas fa-briefcase',
    life: 'fas fa-heart',
    study: 'fas fa-graduation-cap'
  };
  return icons[type] || 'fas fa-star';
};

// 时间线数据
const timelineList = ref();
const selectTimelineList = async () => {
  const result = await getTimelineList();
  timelineList.value = result.data;
};

onMounted(() => {
  selectTimelineList();
});
</script>
<template>
  <div class="layout-container">
    <ArticleMenu />
    <ArticleTopBg
      height="600px"
      :title="webConfigStore.timelineTitle"
      :subtitles="webConfigStore.timelineSubtitle"
      :background-images="webConfigStore.parsedTimelineCarousel"
    ></ArticleTopBg>
    <div class="timeline-container">
      <!-- 时间线主体 -->
      <div class="timeline"
           v-motion
           :initial="{ opacity: 0, x: -20 }"
           :enter="{ opacity: 1, x: 0 , transition: { delay: 600 }  }">
        <div class="year-group" v-for="(events, year) in timelineList" :key="year">
          <div class="year-marker">{{ year }}</div>

          <div class="events-list">
            <div class="event-item"
                 v-for="event in events"
                 :key="event.id"
            >
              <div class="event-dot"></div>
              <div class="event-card">
                <div class="event-header">
                  <span class="event-date">{{ event.date }}</span>
                  <div class="event-icon" :class="event.type">
                    <i :class="getEventIcon(event.type)"></i>
                  </div>
                </div>
                <h3 class="event-title">{{ event.title }}</h3>
                <p class="event-desc">{{ event.description }}</p>
                <div class="event-footer" v-if="event.tags || event.link">
                  <div class="event-tags" v-if="event.tags">
                    <span v-for="tag in event.tags" :key="tag" class="tag">
                      {{ tag }}
                    </span>
                  </div>
                  <a v-if="event.link"
                     :href="event.link"
                     target="_blank"
                     class="event-link">
                    查看详情
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <LayoutFloatingButtons />
    <LayoutFooter />
  </div>
</template>

<style scoped lang="less">
.layout-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .timeline-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 12px 24px 12px;

    .page-header {
      text-align: center;
      margin-bottom: 60px;

      h1 {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 1rem;
      }

      .subtitle {
        color: #64748b;
        font-size: 1.1rem;
      }
    }
  }

  .timeline {
    position: relative;
    padding: 40px 0;

    .year-group {
      margin-bottom: 60px;

      .year-marker {
        font-size: 2.2rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 30px;
        padding-left: 32px;
      }

      .events-list {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          background: #e5e7eb;
        }
      }

      .event-item {
        position: relative;
        padding-left: 32px;
        margin-bottom: 40px;

        .event-dot {
          position: absolute;
          left: -6.5px;
          top: 24px;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #60a5fa;
          border: 2px solid #fff;
          box-shadow: 0 0 0 2px #60a5fa;
        }

        .event-card {
          background: rgba(255,255,255,0.9);
          backdrop-filter: blur(10px);
          border-radius: 12px;
          padding: 24px;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease;

          &:hover {
            transform: translateY(-2px);
          }

          .event-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            .event-date {
              font-size: 0.9rem;
              color: #64748b;
            }

            .event-icon {
              width: 32px;
              height: 32px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;

              &.blog { background: #60a5fa; }
              &.project { background: #10b981; }
              &.achievement { background: #f59e0b; }
              &.work { background: #8b5cf6; }
              &.life { background: #ec4899; }
              &.study { background: #6366f1; }
            }
          }

          .event-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 8px;
          }

          .event-desc {
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 16px;
          }

          .event-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .event-tags {
              display: flex;
              gap: 8px;
              flex-wrap: wrap;

              .tag {
                padding: 4px 12px;
                border-radius: 16px;
                font-size: 0.85rem;
                color: #60a5fa;
                background: #eff6ff;
              }
            }

            .event-link {
              color: #60a5fa;
              font-size: 0.9rem;
              text-decoration: none;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}

// 移动端响应式优化
@media (max-width: 768px) {
  .layout-container {
    .timeline-container {
      width: 95%;
      padding: 24px 0;

      .timeline {
        padding: 20px 0;

        .year-group {
          margin-bottom: 40px;

          .year-marker {
            font-size: 1.8rem;
            margin-bottom: 20px;
            padding-left: 28px;
          }

          .events-list {
            &::before {
              left: 4px; // 调整时间线位置
            }
          }

          .event-item {
            padding-left: 28px;
            margin-bottom: 24px;

            .event-dot {
              left: -2.5px;
              width: 10px;
              height: 10px;
            }

            .event-card {
              padding: 16px;
              border-radius: 8px;

              .event-header {
                margin-bottom: 12px;

                .event-date {
                  font-size: 0.85rem;
                }

                .event-icon {
                  width: 28px;
                  height: 28px;
                  border-radius: 6px;
                }
              }

              .event-title {
                font-size: 1rem;
                margin-bottom: 6px;
              }

              .event-desc {
                font-size: 0.9rem;
                margin-bottom: 12px;
              }

              .event-footer {
                flex-wrap: wrap;
                gap: 8px;

                .event-tags {
                  gap: 6px;

                  .tag {
                    padding: 3px 10px;
                    font-size: 0.8rem;
                  }
                }

                .event-link {
                  font-size: 0.85rem;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .layout-container {
    .timeline-container {
      width: 95%;

      .timeline {
        .year-group {
          margin-bottom: 32px;

          .year-marker {
            font-size: 1.6rem;
            padding-left: 24px;
          }

          .event-item {
            padding-left: 24px;
            margin-bottom: 20px;

            .event-card {
              padding: 14px;

              .event-header {
                margin-bottom: 10px;

                .event-date {
                  font-size: 0.8rem;
                }

                .event-icon {
                  width: 24px;
                  height: 24px;
                }
              }

              .event-title {
                font-size: 0.95rem;
              }

              .event-desc {
                font-size: 0.85rem;
                line-height: 1.5;
              }
            }
          }
        }
      }
    }
  }
}

// 横屏优化
@media screen and (orientation: landscape) and (max-height: 576px) {
  .layout-container {
    .timeline-container {
      padding-top: 16px;

      .timeline {
        .year-group {
          margin-bottom: 24px;
        }
      }
    }
  }
}
</style>
